<template>
  <div class="detail-box">
    <!--tab对应有值-->
    <template v-if="true">
      <!-- 头部分类 -->
      <div class="flex flex-align-center head-box">
        <a class="head-item">全职招聘</a>
        <a class="head-item active">兼职招聘</a>
        <a class="head-item">找工作</a>
        <a class="head-item">招聘服务员</a>
      </div>
      <!-- 内容区块 -->
      <div class="content-box">
        <!--头部-->
        <div class="content-box-head flex flex-pack-justify flex-align-center">
          <!--左侧-->
          <div class="head-info-box flex">
            <div class="info-img-box">
              <img src="/static/images/index/1703081133443720835.png" alt="" />
            </div>
            <div class="info-name-box flex flex-v flex-pack-center">
              <span class="name">黑猫微圈</span>
              <div>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="success">标签</van-tag>
              </div>
            </div>
          </div>
          <!--右侧-->
          <a href="" class="link-phone flex flex-align-center flex-pack-center">拨打电话</a>
        </div>
        <!--内容区域-->
        <div class="content-section">
          <p> 在城里工作，没时间陪伴爸妈，希望领养一只调皮的二哈还有一只田园犬陪伴他们，我家地方很大，有围墙，我妈很喜欢散步，遛狗不是问题，以前养过狗狗，可惜年纪太大去世了。口令：黑猫微圈就是好 </p>
          <div class="flex content-img-box">
            <a href="" class="img-list">
              <img src="http://image.chwlsq.com/1/info/7_1703201400212765808.jpgthumb.jpg" alt="">
            </a>
            <a href="" class="img-list">
              <img src="http://image.chwlsq.com/1/info/7_1703201400212765808.jpgthumb.jpg" alt="">
            </a>
            <a href="" class="img-list">
              <img src="http://image.chwlsq.com/1/info/7_1703201400212765808.jpgthumb.jpg" alt="">
            </a>
            <a href="" class="img-list">
              <span class="flex flex-pack-center flex-align-center">+5</span>
              <img src="http://image.chwlsq.com/1/info/7_1703201400212765808.jpgthumb.jpg" alt="">
            </a>
          </div>
        </div>
        <!--定位区域-->
        <div></div>
        <!--提示-->
        <div class="content-tip-box flex flex-align-center flex-pack-justify">
          <div class="tip-box">
            <span class="tip">01-28刷新</span>
            <span>来源: 黑猫吃喝玩乐</span>
          </div>
          <a href="" class="tip-showall">查看详情 >> </a>
        </div>

        <!--点赞操作-->
        <div class="content-opera-box flex">
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/liulan.png" alt="" />
            <span>4316人浏览</span>
          </div>
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/zan1.png" alt="" />
            <span>4316人点赞</span>
          </div>
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/zhuan.png" alt="" />
            <span>4316人转发</span>
          </div>
        </div>
      </div>
      <div class="content-box">
        <!--头部-->
        <div class="content-box-head flex flex-pack-justify flex-align-center">
          <!--左侧-->
          <div class="head-info-box flex">
            <div class="info-img-box">
              <img src="/static/images/index/1703081133443720835.png" alt="" />
            </div>
            <div class="info-name-box flex flex-v flex-pack-center">
              <span class="name">黑猫微圈</span>
              <div>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="success">标签</van-tag>
              </div>
            </div>
          </div>
          <!--右侧-->
          <a href="" class="link-phone flex flex-align-center flex-pack-center">拨打电话</a>
        </div>
        <!--内容区域-->
        <div class="content-section">
          <p> 在城里工作，没时间陪伴爸妈，希望领养一只调皮的二哈还有一只田园犬陪伴他们，我家地方很大，有围墙，我妈很喜欢散步，遛狗不是问题，以前养过狗狗，可惜年纪太大去世了。口令：黑猫微圈就是好 </p>
          <div class="flex flex-align-center flex-pack-center">
            <a href="" class="img-list"></a>
          </div>
        </div>
        <!--定位区域-->
        <div></div>
        <!--提示-->
        <div class="content-tip-box flex flex-align-center flex-pack-justify">
          <div class="tip-box">
            <span class="tip">01-28刷新</span>
            <span>来源: 黑猫吃喝玩乐</span>
          </div>
          <a href="" class="tip-showall">查看详情 >> </a>
        </div>

        <!--点赞操作-->
        <div class="content-opera-box flex">
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/liulan.png" alt="" />
            <span>4316人浏览</span>
          </div>
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/zan1.png" alt="" />
            <span>4316人点赞</span>
          </div>
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/zhuan.png" alt="" />
            <span>4316人转发</span>
          </div>
        </div>
      </div>
    </template>

    <!--tab对应无值-->
    <template v-if="false">
      <div class="flex flex-v flex-align-center flex-pack-center head-nobody-box">
        <img src="/static/images/index/none.png" alt="" />
        <span class="noboby-tip">暂时没有信息，请稍候再试</span>
      </div>
    </template>
  </div>
</template>

<script>
import { Tag } from 'vant'
export default {
  name: 'DetailInfo',
  components: {
    [Tag.name]: Tag
  },
  props: {}
}
</script>

<style scoped lang="less">
.detail-box{
  .head-box{
    border-top: 5px solid @white-gray;
    border-bottom: 5px solid @white-gray;
    background-color: @white;
    padding: 8px;
    .head-item{
      background:@white;
      border: 1px solid #E0E0E0;
      padding: 8px;
      display: inline-block;
      margin: 3px 5px 3px 0;
      color: #666;
      font-size: 16px;
      &.active{
        border: 1px solid #ed414a;
        color: #ed414a;
      }
    }
  }
  // 内容区域
  .content-box{
    background-color: @white;
    margin-bottom: 10px;
    border-bottom: 10px solid @white-gray;
    .content-box-head{
      padding: 15px;
      .head-info-box{
        .info-img-box{
          padding: 2px;
          img{
            width: 55px;
            height: 55px;
          }
        }
        .info-name-box{
          margin-left: 15px;
          .name {
            font-size: 14px;
            color: #4395f5;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
          }
        }
      }
      .link-phone{
        width: 96px;
        height: 30px;
        color: #fff;
        font-size: 14px;
        background-color: #ed414a;
        border-radius: 5px;
      }
    }
    .content-section{
      p{
        color: #666;
        line-height: 25px;
        font-size: 15px;
        margin: 0;
        padding-right: 15px;
        padding-left: 15px;
      }
      .content-img-box{
        padding: 0px 15px;
        .img-list{
          margin-right: 8px;
          position: relative;
          span{
            position: absolute;
            background: rgba(0,0,0,.3);
            color: #fff;
            font-size: 24px;
            width: 80px;
            height: 80px;
          }
          img{
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
  // 提示
  .content-tip-box{
    padding: 8px 15px;
    color: #999;
    font-size: 14px;
    overflow: hidden;
    .tip-showall{
      font-size: 14px;
      float: left;
      color: #97abd1;
      margin-right: 3px
    }
  }
  .content-opera-box{
    height: 40px;
    .opera-box{
      margin-left: 10px;
      img{
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      span {
        color: #888;
        font-size: 14px;
      }
    }
  }
  // 页脚
  .content-footer-box{
    padding: 15px;
    .footer-container{
      padding: 10px 5px;
      background-color: #eee;
      .footer-item{
        span{
          font-size: 14px;
          color: #666;
          margin-right: 8px;
        }
      }
    }
  }
  // 暂无数据
  .head-nobody-box{
    width: 100%;
    height: 191px;
    img{
      width: 100px;
      height: 100px;
    }
    .noboby-tip{
      font-size: 14px;
      color: #3d3d3d;
    }
  }
}
</style>
